<template>
  <div v-if="bannerList">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="data in bannerList" :key="data.id">
          <img :src="data.imgInfo" alt="图片" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper-bundle.min.js";
import { mapActions, mapState } from "vuex";
export default {
  name: "SwiperBanner",
  props: ["myoption"],
  computed: {
    ...mapState("BannerModule", ["bannerList"]),
  },
  methods: {
    ...mapActions("BannerModule", ["getBannerList"]),
  },
  beforeMount() {
    if (this.bannerList.length === 0) {
      this.getBannerList().then(() => {});
    }
  },
  mounted() {
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 1000,
        },
        observer: true,
        observeSlideChildren: true,
        pagination: {
          el: ".swiper-pagination",
        },
      });
    });
  },
};
</script>
<style lang="less" scoped>
.swiper-container {
  .swiper-wrapper {
    img {
      width: 100%;
    }
  }
}
</style>